<%--
  Created by IntelliJ IDEA.
  User: 彭辉明
  Date: 2024/6/6
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
        margin: 0;
        padding: 0;
    }

    .container {
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 5px;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    label {
        display: block;
        margin-bottom: 10px;
    }

    input[type="text"],
    input[type="radio"] {
        margin-bottom: 10px;
    }

    input[type="text"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    input[type="radio"] + label {
        margin-right: 15px;
    }

    button {
        display: block;
        width: 100%;
        padding: 10px;
        margin-top: 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    #charCount {
        display: inline-block;
        margin-left: 10px;
        color: #999;
    }
</style>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <h1>创建存储空间</h1>
    存储空间名称:<input type="text" id="ossName" maxlength="63"><span id="charCount">63</span><br>
    存储类型: <input type="radio" name="ossType" value="标准存储">标准存储
            <input type="radio" name="ossType" value="低频访问存储">低频访问存储
            <input type="radio" name="ossType" value="归档存储">归档存储
    <br>
    读写权限:
    <input type="radio" name="ossMission" value="Pri">私有(Pri)
    <input type="radio" name="ossMission" value="R">公共读(R)
    <input type="radio" name="ossMission" value="RW">公共读写(RW)
    <br>
    <button id="Ok">确定</button><button id="regin">返回</button>
</body>
</html>
<script>
    //初始化剩余字符方法
    updateCharCount();
    // 给文本添加松开事件
    $('#ossName').on('keyup', updateCharCount);

    function updateCharCount() {
        let ossNameInput = $('#ossName');
        let remainingChars = 63 - ossNameInput.val().length;
        $('#charCount').text(remainingChars + '字符剩余');

        if (remainingChars < 0) {
            alert('存储空间名称不得超过63个字符，请重新输入！');
            ossNameInput.val(ossNameInput.val().slice(0, 63))
            updateCharCount();
        }
    }
    //提交，判断数据库是否存在相同的名称，相同则提示，不相同则提交数据
    $('#Ok').on('click',function (){
        let ossName = $('#ossName').val().trim();
        if (ossName.length === 0 || ossName.length > 63) {
            alert('存储空间名称不能为空且不得超过63个字符！');
            return;
        }
        $.ajax({
            url:'oss',
            type:'post',
            dataType:'json',
            data:{
                opr:'selectByOssName',
                bucketName:ossName
            },
            success:function (data){
                console.log(data)
                if(data!=null){
                    alert('存储空间名称已存在！请更换名称重试！')
                }else {
                    let ossType = $('input[name="ossType"]:checked').val();
                    let ossMission = $('input[name="ossMission"]:checked').val();
                    if(ossType==null){
                        alert('请选择存储类型！')
                        return;
                    }
                    if(ossMission==null){
                        alert('请选择读写权限！')
                        return;
                    }
                    $.ajax({
                        url:'oss',
                        type:'post',
                        dataType:'json',
                        data:{
                            opr:'add',
                            bucketName:ossName,
                            ossType:ossType,
                            ossMission:ossMission
                        },
                        error:function (){
                            alert("请求失败")
                        },
                        success:function (data){
                            if(data==true){
                                alert('创建成功！')
                                window.location.href = 'Oss.jsp'
                            }else {
                                alert('创建失败！请重试！')
                            }
                        }
                    })
                }
            },
            error:function (){
            }
        })
    })
    $('#regin').on('click',function (){
        window.location.href = 'Oss.jsp'
    })
</script>
